import React, {useState} from "react"
import {Button, Cascader, Form, Input, message, PageHeader} from "antd"
import "./index.less"
import CheckOutlined from "@ant-design/icons/es/icons/CheckOutlined"
import {withRouter} from "react-router-dom"
import ToolTipsInput from "../../../../shared/libs/tooltips-input"
import {postJSON} from "../../../../shared/server"
import ArrowLeftOutlined from "@ant-design/icons/es/icons/ArrowLeftOutlined"
import area, {areaFilter} from "../../../../shared/libs/area"
import EditOutlined from "@ant-design/icons/es/icons/EditOutlined"

const labelWidth = 4
const formItemLayout = {
  labelCol: {
    xs: {span: labelWidth},
    sm: {span: labelWidth},
  },
  wrapperCol: {
    xs: {span: 14},
    sm: {span: 14},
  },
}

const buttonLayout = {
  wrapperCol: {offset: labelWidth, span: 16},
}


const MerchantForm = ({data}) => {

  const [form] = Form.useForm()
  const [buttonLock, $buttonLock] = useState(false)
  const [editing, $editing] = useState(false)

  const onEdit = () => {
    $editing(true)
  }

  const onCancel = () => {
    $editing(false)
  }

  const onFinish = (values) => {
    $buttonLock(true)
    if (values && values.area && values.area.length === 3) {
      values.province = values.area[0]
      values.city = values.area[1]
      values.county = values.area[2]
    }
    postJSON(`/merchant`, values)
      .then((data) => {
        if (data) {
          message.success('信息保存成功')
          $editing(false)
        }
      })
      .finally(() => $buttonLock(false))
  }

  const formDisabled = data && data.id && !editing

  return (
    <div className={'zr-panel'}>
      <div className={'zr-panel-header'}>
        <div>
          <PageHeader backIcon={<ArrowLeftOutlined/>}
                      onBack={() => window.history.back()} title={`完善商户信息`}
                      subTitle={`填写商户资料,详细介绍等`}/>
        </div>
      </div>
      <div className={'ld2-list-page-box absolute'}>
        <div className={'form-page'}>
          <Form {...formItemLayout}
                onFinish={onFinish}
                initialValues={data}
                form={form}>

            <Form.Item label={'商户名'}
                       rules={[
                         {required: true, message: '商户名必需填写'},
                         {max: 50, message: '只能50字以内'}
                       ]}
                       name='name'>
              <ToolTipsInput title={'请输入商户名'}
                             className={'phone-input'}
                             disabled={formDisabled}
                             placeholder='请输入商户名'/>
            </Form.Item>

            <Form.Item label={'所在地区'} name={'area'}
                       rules={
                         [{required: true, message: '请选择地址所在省、市、区、县'}]
                       }>
              <Cascader options={area}
                        disabled={formDisabled}
                        className={'phone-input'}
                        showSearch={areaFilter}
                        placeholder='请输入并选择地址所在省、市、区、县'/>
            </Form.Item>

            <Form.Item label={'详细地址'} name={'address'} rules={[{required: true, message: '请输入详细地地址、街道'}]}>
              <ToolTipsInput
                disabled={formDisabled}
                title={'请输入详细地地址,街道,例如：xxx路xx号'}
                placeholder='请输入详细地地址'/>
            </Form.Item>

            <Form.Item label={'联系人'} name={'contacts'} rules={[{required: true, message: '请输入联系人'}]}>
              <ToolTipsInput
                disabled={formDisabled}
                className={'phone-input'}
                title={'请输入联系人,例如：张经理'}
                placeholder='请输入联系人'/>
            </Form.Item>

            <Form.Item label={'联系方式一'} name={'primaryPhone'}
                       rules={[{required: true, message: '请输入主要联系电话'},
                         {
                           pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$|^\d{3,5}\-?\d{7,8}$/,
                           message: '电话号码格式不正确'
                         }
                       ]}>
              <ToolTipsInput title={'国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                             className={'phone-input'}
                             disabled={formDisabled}
                             placeholder='请输入手机号码名固定电话号码'/>
            </Form.Item>


            <Form.Item label={'联系方式二'} name={'otherPhone1'}
                       rules={[
                         {
                           pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$|^\d{3,5}\-?\d{7,8}$/,
                           message: '电话号码格式不正确'
                         }
                       ]}>
              <ToolTipsInput title={'国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                             className={'phone-input'}
                             disabled={formDisabled}
                             placeholder='请输入手机号码名固定电话号码'/>
            </Form.Item>

            <Form.Item label={'联系方式三'} name={'otherPhone2'}
                       rules={[
                         {
                           pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$|^\d{3,5}\-?\d{7,8}$/,
                           message: '电话号码格式不正确'
                         }
                       ]}>
              <ToolTipsInput title={'国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                             className={'phone-input'}
                             disabled={formDisabled}
                             placeholder='请输入手机号码名固定电话号码'/>
            </Form.Item>

            <Form.Item label={'具体描述'}
                       rules={[
                         {max: 200, message: '只能500字以内'}
                       ]}
                       name='description'>
              <Input.TextArea className={'clothing-text-area'} autosize rows={4}
                              disabled={formDisabled}
                              placeholder={'请输入描述,如主营范围,经营品牌等（500字以内）'}/>
            </Form.Item>

            <Form.Item {...buttonLayout}>
              {
                formDisabled ? undefined :
                  <Button style={{marginRight: '20px'}} onClick={onCancel} disabled={buttonLock}>
                    取消
                  </Button>
              }
              {
                formDisabled ?
                  <span>
                    <Button type="primary" onClick={onEdit}>
                      <EditOutlined/> 编辑
                    </Button>
                  </span>
                  : <Button type="primary" htmlType="submit" loading={buttonLock}>
                    {buttonLock ? undefined : <CheckOutlined/>} 保存
                  </Button>
              }
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default withRouter(MerchantForm)